<template>
    <view>
        <view class="bigbgv" v-if="isShow == true">
            <view class="listBgV">
                <view class="listitem" v-for="(item,idx) in list" :key="idx"
                      @click="isMore?didSel(item,idx):didSel_one(item,idx)">
                    <view>
                        <view style="font-size: 34rpx;">{{item.userName}}</view>
                        <view>{{item.cardNo}}</view>
                    </view>
                    <uni-icons type="checkbox-filled" :color="selidx[idx] == item ? '#6CB041':'#eee'" size="52"></uni-icons>
                </view>
                <view class="l_plus">
                    <view class="plus_pad" @tap="navTo">
                        <uni-icons type="plusempty" size="54" color="#999"></uni-icons>
                    </view>
                </view>
            </view>
            <view class="tui-flex">
                <view class="close_btn" @tap="closeShow">
                    取消
                </view>
                <view class="surebtn" @click="sureClick">
                    {{btnTit}}
                </view>
            </view>
        </view>
    </view>
</template>

<script>
    export default {
        data() {
            return {
                selidx: []
            };
        },
        props: {
            isShow: {
                type: Boolean,
                default: false
            },
            isMore: {
                type: Boolean,
                default: false
            },
            list: {
                type: Array,
                default: []
            },
            btnTit: {
                type: String,
                default: '确认'
            },
            // selidx: {
            //     type: Array,
            //     default: []
            // }
        },
        created() {
            /*this.list.forEach((itm) => {
                this.selidx.push('')
            })*/
        },
        onLoad() {
            // console.log(this.selidx)
        },
        method: {},
        methods: {
            didSel(item, idx) {
                console.log(item, this.selidx);
                if (this.selidx.length > 0) {
                    let ishave = false
                    for (let i = 0; i < this.selidx.length; i++) {
                        if (this.selidx[i] == item) {

                            this.selidx.splice(i, 1, '')
                            ishave = true;
                            break;
                        }
                    }
                    console.log(ishave);
                    if (ishave == false) {
                        this.selidx.splice(idx, 1, item)
                    }
                } else {
                    this.selidx.splice(idx, 1, item)
                    //通知父组件
                }
            },
            didSel_one(item,idx){
                for (let i = 0; i < this.selidx.length; i++) {
                    this.selidx.splice(i, 1, '')
                }
                this.selidx.splice(idx, 1, item)
            },
            sureClick() {
                var sellist = [];
                for (let i = 0; i < this.selidx.length; i++) {
                    if (this.selidx[i] != '') {
                        sellist.push(this.selidx[i])
                    }
                }
                /*if (sellist.length <= 0) {
                    uni.showToast({
                        icon: 'none',
                        title: '您还没有选择哦！'
                    })
                    return
                }*/
                this.$emit('closepop'); //通知父组件改变。
                this.$emit('pushdic', JSON.stringify(sellist));
            },
            navTo() {
                uni.navigateTo({
                    url: '/pagesA/set/components/contacts?status=0'
                })
            },
            closeShow() {
                this.$emit('closeShow')
            }
        },
    }
</script>

<style lang="scss">
    .bigbgv {
        width: 100%;
        height: 100%;
        background-color: rgba($color: #000000, $alpha: 0.3);
        position: fixed;
        display: flex;
        flex-direction: column;
        justify-content: flex-end;
        top: 0;
        left: 0;
        bottom: 0;
        right: 0;
        .listBgV {
            width: 90%;
            height: auto;
            margin-left: 5%;
            background-color: #fff;
            margin-bottom: 40rpx;
            border-radius: 20rpx;
            display: flex;
            flex-direction: column;
            align-items: center;
            .listitem {
                width: 90%;
                padding: 20rpx 0;
                border-bottom: 2rpx solid #eee;
                display: flex;
                justify-content: space-between;
                align-items: center;
            }
        }
        .surebtn {
            flex: 1;
            margin: 0 2% 3%;
            height: 90rpx;
            line-height: 90rpx;
            text-align: center;
            color: #FFFFFF;
            background-color: #6CB041;
            border-radius: 80rpx;
            font-size: 34rpx;
        }
        .close_btn {
            flex: 1;
            background: #fff;
            margin: 0 2% 3%;
            height: 90rpx;
            line-height: 90rpx;
            border-radius: 80rpx;
            text-align: center;
            font-size: 34rpx;
        }
    }
    .l_plus {
        padding: 30rpx;
        width: 50%;
        text-align: center;
        .plus_pad {
            border: 4rpx solid #eee;
            border-radius: 80rpx;
        }
    }
</style>
